<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-08 19:48:00
-->
<template>
  <div id="bottom3" style="height: 95%"></div>
</template>
<script>
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    myChart() {
      const data = [
        { time: "8-10", key: "series1", value: 150 },
        { time: "8-10", key: "series2", value: 300 },
        { time: "10-12", key: "series1", value: 170 },
        { time: "10-12", key: "series2", value: 370 },
        { time: "12-14", key: "series1", value: 100 },
        { time: "12-14", key: "series2", value: 300 },
        { time: "14-16", key: "series1", value: 150 },
        { time: "14-16", key: "series2", value: 360 },
        { time: "16-18", key: "series1", value: 90 },
        { time: "16-18", key: "series2", value: 290 },
        { time: "18-20", key: "series1", value: 50 },
        { time: "18-20", key: "series2", value: 150 },
      ];
      const line = new Line("bottom3", {
        data,
        xField: "time",
        yField: "value",
        legend: false,
        seriesField: "key",
        stepType: "hvh",
      });

      line.render();
    },
  },
  created() {},
  mounted() {
    this.myChart();
  },
};
</script>